<template>
  <div class="app-container">
    <div class="search-container">
      <h2>{{ route.meta.title }}记录</h2>
      <el-button-group>
        <el-button
          :type="activeTime === item.value ? 'primary' : 'default'"
          v-for="item in timeSelect"
          :key="item.value"
          @click="handleChangeTime(item.value)"
        >
          {{ item.label }}
        </el-button>
      </el-button-group>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="list"
        highlight-current-row
      >
        <el-table-column
          v-for="item in column"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        >
          <template #default="scope">
            <span v-if="item.prop === 'result'" :style="{color: scope.row[item.prop]?'#409EFF':'#F56C6C'}">
              {{ scope.row[item.prop] === 0 ? "不满意" : "满意" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="120">
          <template #default="scope">
            <slot name="operate" :scope="scope"></slot>
            <el-button
              type="danger"
              link
              size="small"
              @click.stop="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script setup>
const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  total: {
    required: true,
    type: Number,
    default: 0,
  },
  queryParams: {
    required: true,
    type: Object,
    default() {
      return {
        pageNum: 1,
        pageSize: 10,
      };
    },
  },
  list: {
    required: true,
    type: Array,
    default() {
      return [];
    },
  },
  column: {
    required: true,
    type: Array,
    default() {
      return [];
    },
  },
});
const emit = defineEmits([
  "handleChangeTime",
  "handleQuery",
  "handleDelete",
  "update:total",
  "update:queryParams",
]);

import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const timeSelect = ref([
  { label: "全部", value: 1 },
  { label: "最近一周", value: 2 },
  { label: "最近一个月", value: 3 },
  { label: "最近三个月", value: 4 },
  { label: "最近一年", value: 5 },
]);
const activeTime = ref(1);

// 切换时间
function handleChangeTime(value) {
  activeTime.value = value;
  emit("handleChangeTime", value);
}
function handleQuery() {
  emit("handleQuery");
}
function handleDelete(row) {
  emit("handleDelete", row);
}
</script>
<style lang="scss" scoped>
.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
